<template>
    <div class="page_wageSettlement">

        <com-top-nav-bar :topNavBarObj="topNavBarObj" @toGetKeywordOrDateStr="getKeyWordOrDateStr"
            :isHiddenDate="false" />

        <div class="jobArr" v-if='jobList.length'>
            <job-item-for-wage v-for="(item, index) in jobList" :key="item.id + index" :id="item.id"
                :keyWord="'wageSettlement'" :jobItem="item" :serchType='1'></job-item-for-wage>

            <van-pagination v-show="total*1 > 0" v-model="querySearchObj.pageIndex" :total-items="total"
                :items-per-page="querySearchObj.pageSize" @change="getPaginationValue_wage" force-ellipses>
                <template #prev-text>
                    <van-icon name="arrow-left" />
                </template>
                <template #next-text>
                    <van-icon name="arrow" />
                </template>
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>

        <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>
    </div>
</template>

<script>
import comHeader from '../../components/comHeader'
import comJobItem from '../../components/comJobItem'
import jobItemForWage from './jobItemForWage'

import comTopNavBar from '../../components/comTopNavBar'

export default {
  name: 'wageSettlement',
  components: {
    comHeader,
    comJobItem,
    comTopNavBar,
    jobItemForWage
  },
  data() {
    return {
      topNavBarObj: {
        title: '工资结算',
        searchPlaceholder: '',
        dateLabel: '发薪',
        pathForLeft: ''
      },

      jobList: [],
      total: 0,
      searchType: 'keyword',

      querySearchObj: {
        pageIndex: 1,
        pageSize: 10,
        keyword: ''
      }
    }
  },
  created() {
    this.getWageSettlementJobs()
  },
  methods: {
    //获取工资结算对应的工作信息
    async getWageSettlementJobs() {
      const result = await this.$api.job.GetWageSettlementJobs(this.querySearchObj)
      if (result.code === 200) {
        this.jobList = result.data.jobs
        this.total = result.data.count || 0
      }
    },

    async getWageSettlementJobs_byDate() {
      const resp = await this.$api.job.GetWageSettlementJobsByDate(this.querySearchObj)
      if (resp.code === 200) {
        this.jobList = resp.data.jobs
        this.total = resp.data.count || 0
      }
    },

    getPaginationValue_wage(val) {
      Object.assign(this.querySearchObj, {pageIndex: val})
      if ('date' === this.searchType) {
        this.getWageSettlementJobs_byDate()
      } else {
        this.getWageSettlementJobs()
      }
    },

    getKeyWordOrDateStr(val) {
      const obj = {
        pageIndex: 1,
        keyword: val.keyword || val.date
      }
      Object.assign(this.querySearchObj, obj)

      if (val.date) {
        this.searchType = 'date'
        this.getWageSettlementJobs_byDate()
      } else {
        this.searchType = 'keyword'
        this.getWageSettlementJobs()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page_wageSettlement {
  width: 100%;

  .noData {
    display: inline-block;
    width: 100%;
    margin: 5% auto;
    min-height: 80vh;
    color: #323233;
    font-weight: 500;
    font-size: 0.35rem;
    text-align: center;
  }
}
</style>
